<template>
  <div class="filter">
    <div :class="{multTerm: conditionsGroup.conditionsGroup.length > 1}">
      <el-switch v-if="conditionsGroup.conditionsGroup.length > 1"
                 class="switch"
                 v-model="relationType"
                 active-text="且"
                 inactive-text="或"
                 active-color="#39c6cd"
                 inactive-color="#ff9c4b">
      </el-switch>
      <filter-item ref="filterItem"
                   v-for="item,n in conditions.conditionsGroup"
                   :key="n.toString()"
                   :conditions.sync="item"
                   :index="n">
      </filter-item>
    </div>
    <el-button v-show="newSend.flag" type="text" @click="handleAddTerm">新加一组条件</el-button>
  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  import filterItem from './filterItem'
  import bus from '@/components/common/eventBus'

  export default {
    data() {
      return {
        relationType: this.conditionsGroup.relationType === 2,
        conditions: this.conditionsGroup
      }
    },
    mounted() {
      this.initComponent()
    },
    props: {
      conditionsGroup: {
        type: Object,
        default: function () {
          return {
            relationType: 2,
            conditionsGroup: [{
              relationType: 2,
              conditions: [{pid: null, fieldName: '', pattern: '', content: ''}]
            }]
          }
        }
      },
      newSend: {
        type: Object,
        default: function () {
          return {
            flag: true,
            id: ''
          }
        }
      }
    },
    components: {filterItem},
    watch: {
      relationType(val) {
        this.conditions.relationType = this.relationType === true ? 2 : 1
      },
      conditionsGroup: {
        deep: true,
        handler: function (obj) {
          this.conditions = obj
        }
      }
    },
    computed: {
      ...mapState({
        cusTh: state => state.cusManage.cusTh
      }),
      fields() {
        let keys = Object.keys(this.cusTh)
        return keys.map(i => this.cusTh[i])
      }
    },
    methods: {
      ...mapActions(['getConditions']),
      initComponent() {
        let that = this
        // 定义移除条件事件
        bus.$off('removeCondition')
        bus.$on('removeCondition', function (index) {
          if (that.conditions.conditionsGroup.length === 1 && that.conditions.conditionsGroup[0].conditions.length === 1) {
            this.$message.warning('条件不可为空')
            return false
          }
          that.conditions.conditionsGroup[index[0]].conditions.splice(index[1], 1)
          if (!that.conditions.conditionsGroup[index[0]].conditions.length) {
            that.newSend.flag = true
            that.conditions.conditionsGroup.splice(index[0], 1)
          }
        })
        this.getConditions()
      },
      // 添加一组条件
      handleAddTerm() {
        this.conditions.conditionsGroup.push({relationType: 2, conditions: [{fieldName: '', pattern: '', content: ''}]})
        if (this.newSend.id) {
          this.newSend.flag = false
        }
      },
      clearFilter() {
        this.conditions.conditionsGroup = [{
          relationType: 2,
          conditions: [{pid: '', fieldName: '', pattern: '', content: ''}]
        }]
      }
    }
  }
</script>
<style lang="scss">
  .filter {
    margin: 5px 15px 0 15px;
    .multTerm {
      float: left;
      margin-top: 15px;
      width: 93%;
      position: relative;
      padding-left: 60px;
      border-left: 1px solid #ddd;
      .filter-item:nth-of-type(1) {
        margin-top: -15px;
      }
      .filter-item:nth-last-of-type(1) {
        margin-bottom: -15px;
      }
    }
    .multTerm:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 60px;
      height: 1px;
      background: #ddd;
    }
    .multTerm:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 60px;
      height: 1px;
      background: #ddd;
    }
    .switch {
      position: absolute;
      top: 50%;
      left: -42px;
      transform: translateY(-50%)
    }
    .multTerm ~ .el-button {
      margin: 22px 0 0 60px;
    }
    .removeCondition {
      line-height: 36px;
      vertical-align: top;
      cursor: pointer;
      font-size: 16px;
      color: #ff4545;
    }
  }
</style>
